{% block sw_cms_el_config_text %}
<sw-tabs
    position-identifier="sw-cms-element-config-text"
    class="sw-cms-el-config-text__tabs"
    default-item="content"
>

    <template #default="{ active }">
        {% block sw_cms_el_config_text_tab_content %}
        <sw-tabs-item
            :title="$tc('sw-cms.elements.general.config.tab.content')"
            name="content"
            :active-tab="active"
        >
            {{ $tc('sw-cms.elements.general.config.tab.content') }}
        </sw-tabs-item>
        {% endblock %}
        {% block sw_cms_el_text_config_tab_options %}
        <sw-tabs-item
            :title="$tc('sw-cms.elements.general.config.tab.settings')"
            name="settings"
            :active-tab="active"
        >
            {{ $tc('sw-cms.elements.general.config.tab.settings') }}
        </sw-tabs-item>
        {% endblock %}
    </template>

    <template #content="{ active }">
        {% block sw_cms_el_text_config_content %}
        <sw-container
            v-if="active === 'content'"
            class="sw-cms-el-config-text__tab-content"
        >
            <sw-cms-inherit-wrapper
                field="content"
                :element="element"
                :label="$tc('sw-cms.elements.text.config.label.content')"
            >
                <template #default="{ isInherited }">
                    <sw-cms-mapping-field
                        v-model:config="element.config.content"
                        value-types="string"
                        :disabled="isInherited"
                    >
                        <sw-text-editor
                            v-if="!feature.isActive('METEOR_TEXT_EDITOR')"
                            :key="isInherited"
                            :value="element.config.content.value"
                            :disabled="isInherited"
                            :allow-inline-data-mapping="true"
                            :sanitize-info-warn="true"
                            enable-transparent-background
                            @update:value="onInput"
                            @blur="onBlur"
                        />

                        <mt-text-editor
                            v-else
                            :key="isInherited + '-meteor'"
                            :disabled="isInherited"
                            :model-value="element.config.content.value"
                            :custom-buttons="customTextEditorButtons"
                            @update:model-value="onInput"
                        />

                        <template #preview="{ demoValue }">
                            <div class="sw-cms-el-config-text__mapping-preview">
                                <div v-html="$sanitize(demoValue)"></div>
                            </div>
                        </template>
                    </sw-cms-mapping-field>
                </template>
            </sw-cms-inherit-wrapper>
        </sw-container>
        {% endblock %}

        {% block sw_cms_el_text_config_settings %}
        <sw-container
            v-if="active === 'settings'"
            class="sw-cms-el-config-text__tab-settings"
        >
            {% block sw_cms_el_text_config_settings_vertical_align %}
            <sw-cms-inherit-wrapper
                field="verticalAlign"
                :element="element"
                :label="$t('sw-cms.elements.general.config.label.verticalAlign')"
            >
                <template #default="{ isInherited }">
                    <mt-select
                        v-model:model-value="element.config.verticalAlign.value"
                        :placeholder="$t('sw-cms.elements.general.config.label.verticalAlign')"
                        :options="alignmentOptions"
                        :disabled="isInherited"
                    />
                </template>
            </sw-cms-inherit-wrapper>
            {% endblock %}
        </sw-container>
        {% endblock %}
    </template>
</sw-tabs>
{% endblock %}
